<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div4" style="width: 400px;height: 400px;background-color: red; margin:-200px 0 0 -200px; position:absolute; top: 50%; left: 50%;">
			<p>这是最大的div</p>
			<div id="div3" style="width: 300px;height: 300px;background-color: blue; margin:-150px 0 0 -150px; position:absolute; top: 50%; left: 50%;">
				<img src="./杰瑞.jpeg" width="50px">
				<div id="div2" style="width: 200px;height: 200px;background-color: wheat; margin:-100px 0 0 -100px; position:absolute; top: 50%; left: 50%;">
					 <a href="https://www.baidu.com">点击去百度</a>
					<div id="div1" style="width: 120px;height: 120px;background-color: darkgoldenrod; margin:-60px 0 0 -60px; position:absolute; top: 50%; left: 50%;">
						<a href="https://www.gitee.com">点击去gitee</a>
					</div>
				</div>
			</div>
		</div>
		<button type="button" onclick="getParent()">获取父元素</button>
		<button type="button" onclick="getChildren()">打印每个子div</button>
	</body>
	<script type="text/javascript">
		function getParent(){
			var test1=document.getElementById('div1');
			console.log('一级父元素为:'+test1.parentElement+','+'一级父节点为:'+test1.parentNode);
			var test1=document.getElementById('div2');
			console.log('二级父元素为:'+test1.parentElement+','+'二级父节点为:'+test1.parentNode);
			var test1=document.getElementById('div3');
			console.log('三级父元素为:'+test1.parentElement+','+'三级父节点为:'+test1.parentNode);
			var test1=document.getElementById('div4');
			console.log('四级父元素为:'+test1.parentElement+','+'四级父节点为:'+test1.parentNode);
			// var test1=document.getElementById('div4');
			// console.log(test1);
			// console.log(test1.children);
			// var test1=document.getElementById('div3');
			// console.log(test1);
			// console.log(test1.parentElement);// 父元素
			// console.log(test1.children);
			// console.log(test1.parentNode); //父节点
		}
		function getChildren(){
			var test1=document.getElementById('div1');
			console.log('一级子元素为:'+test1.children+','+'一级子节点为:'+test1.childNodes);
			var test1=document.getElementById('div2');
			console.log('二级子元素为:'+test1.children+','+'二级子节点为:'+test1.childNodes);
			var test1=document.getElementById('div3');
			console.log('三级子元素为:'+test1.children+','+'三级子节点为:'+test1.childNodes);
			var test1=document.getElementById('div4');
			console.log('四级子元素为:'+test1.children+','+'四级子节点为:'+test1.childNodes);
		}
	</script>
</html>
